<template>
	<div class="yun-cun-min">
		<!-- 云村民招募 -->
		<div class="zhao-mu">
			<el-image :src="cosPrefix + 'three-level/xiangmeng/yunchuangke/chuangyehezuo/yuncunminzhaomu.png'"></el-image>
		</div>

		<!-- 国际创业村 -->
		<div class="he-zuo">
			<div class="title">国际创业村</div>
			<div class="tabs">
				<div :class="['tab', { active: activeTab == index }]" @click="activeTab = index" v-for="(item, index) in list2" :key="index">{{ item.name }}</div>
			</div>

			<div class="list">
				<div class="box" v-for="item in list2[activeTab].list" :key="item.id">
					<base-swiper :img-list="item.imgs" width="38.75rem" height="24.375rem" />
					<div class="info">
						<span class="name">{{ item.name }}</span>
						<span class="desc">{{ item.desc }}</span>
					</div>
				</div>
			</div>
		</div>

		<div class="feng-cai-box">
			<div class="inner-box">
				<div class="title">企业风采</div>
				<div class="img-list">
					<div class="img-box" v-for="(item, index) in list" :key="index">
						<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
						<p class="text-title">{{ item.name }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="CunMinFuWu">
import { useBaseStore } from "@/store/base";
import BaseSwiper from "~V/components/BaseSwiper/index.vue";
const { cosPrefix } = useBaseStore();
const activeTab = ref(0);

const list2 = reactive([
	{
		name: "创客联盟",
		list: [
			{
				id: 1,
				name: "重庆寻梦园花果种植专业合作社",
				imgs: [
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/xunmengyuan/1.jpg",
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/xunmengyuan/2.jpg"
				],
				desc: `重庆寻梦园花果种植专业合作社位于仙女山街道荆竹村杨柳农业社，种植蓝莓、葡萄、李子、樱桃、梨子、桃子等多种水果，面积150余亩，果园管理规范、技术领先。
                产出的水果色靓、味浓、形美，品质极佳。水果采摘期从6月一直延续到10月，可提供采摘和研学合作。联系人：胡老师。联系电话：13983228377。`
			},
			{
				id: 2,
				name: "重庆方德润安生态农业旅游开发有限公司",
				imgs: [cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/xiannvshan/fangderun/1.png"],
				desc: `重庆方德润安生态农业旅游开发有限公司位于仙女山街道荆竹村水竹坪农业社，注册资本金1000万元。
                建设运营的文旅综合体验项目“归原小镇”，以“活化乡村、留住乡愁、回归自然”为目标，以田园、乐园、庄园“三园模式”为主线，依托仙女山喀斯特地形地貌的自然生态资源、挖掘和复兴武陵风情人文内涵，深耕乡村生态文明，为当代都市人修一条回到家乡的路。
                寻求合作：寻求各旅游团队合作，以及民宿经营主体联合经营。
                联系人：张总   电话：13224949160`
			},
			{
				id: 3,
				name: "重庆市武隆区新田野三农产业联合会",
				imgs: [
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/wulong/xintianye/1.1.jpg",
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/wulong/xintianye/2.jpg",
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/wulong/xintianye/3.jpg"
				],
				desc: `重庆市武隆区新田野三农产业联合会（以下简称“新田野”联合会）位于仙女山街道荆竹村杨柳农业社，于2022年11月组建运营。
联合会以重庆市新田野农业科技发展集团有限公司为招商运营载体，整合武隆特色农文旅商产业资源，布局建设区域特色农产品现代经营销售体系。联合会顺应“三农+”产业发展规律，以标准化、产业化、品牌化为目标，服务中央、重庆、武隆区乡村振兴工作。
寻求合作：寻求企业销售渠道拓展、农户和农产品销售合作。
联系人：应总；电话：18983337333。`
			},
			{
				id: 4,
				name: "脱毒马铃薯种植试验基地",
				imgs: [cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/tuodumalingshu/1.jpg"],
				desc: `自2009年脱毒马铃薯示范试验点落户仙女山街道荆竹村以来，经过10多年时间，培育出了青薯9号、脱毒米拉、兴佳2号、鄂薯5号、鄂薯13、黄金薯和特色紫色
                薯等品种，可供不同生态区域种植，面积也由100亩发展到5000余亩，亩产达到5200斤。试验点蜕变为试验基地，脱毒马铃薯品种供应全区乃至周边多个区县的种植需求。`
			},
			{
				id: 5,
				name: "赤茗农业股份有限公司",
				imgs: [
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/wulong/chiming/c1.jpg",
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/wulong/chiming/c2.jpg",
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/wulong/chiming/c3.jpg"
				],
				desc: `公司成立于2017年4月，注册资本5000万元，茶园面积5000亩，员工50余人，是一家集茶叶种植、加工、销售、技术研发、茶文化推广、休闲观光等于一体的现代农业企业。店铺名称:武隆仙女红茶叶店、联系人:黄杰、电话023-77776880`
			}
		]
	},
	{
		name: "创客兴农",
		list: [
			{
				id: 4,
				name: "重庆方德润安生态农业旅游开发有限公司",
				imgs: [cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/xiannvshan/fangderun/1.png"],
				desc: `重庆方德润安生态农业旅游开发有限公司位于仙女山街道荆竹村水竹坪农业社，注册资本金1000万元。
                建设运营的文旅综合体验项目“归原小镇”，以“活化乡村、留住乡愁、回归自然”为目标，以田园、乐园、庄园“三园模式”为主线，依托仙女山喀斯特地形地貌的自然生态资源、挖掘和复兴武陵风情人文内涵，深耕乡村生态文明，为当代都市人修一条回到家乡的路。
                寻求合作：寻求各旅游团队合作，以及民宿经营主体联合经营。
                联系人：张总   电话：13224949160`
			},
			{
				id: 5,
				name: "荆竹村山地采摘体验馆",
				imgs: [cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/caizhai/c1.jpg"],
				desc: `一是坚持“原汁原味”。因地制宜发展以工代赈项目，按照荆竹村产业布局进行精心谋划，形成“农、旅、文、商”业态互补的产业格局。二是坚持实施的乡村性、
                在地性和创造性，助推一二三产“+旅游”的产业发展格局，让村庄增强自己的生命力，保证持续发展。三是统一引领规划。产业布局各有互补性、与当地项目深度融合性，
                打造“产业振兴+经济撬动+美丽乡村”一体的全新融合发展示范项目。2019年，以院士基地为中心打造高山水果研学基地，后引进返乡创业团队雲涧电子商务公司，在体验馆直播点进行直播带货、视频拍摄、文创产品研发等工作。`
			}
		]
	},
	{
		name: "乡村旅游学校",
		list: [
			{
				id: 6,
				name: "脱毒马铃薯种植试验基地",
				imgs: [cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/tuodumalingshu/1.jpg"],
				desc: `自2009年脱毒马铃薯示范试验点落户仙女山街道荆竹村以来，经过10多年时间，培育出了青薯9号、脱毒米拉、兴佳2号、鄂薯5号、鄂薯13、黄金薯和特色紫色
                薯等品种，可供不同生态区域种植，面积也由100亩发展到5000余亩，亩产达到5200斤。试验点蜕变为试验基地，脱毒马铃薯品种供应全区乃至周边多个区县的种植需求。`
			},
			{
				id: 7,
				name: "重庆寻梦园花果种植专业合作社",
				imgs: [
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/xunmengyuan/1.jpg",
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/xunmengyuan/2.jpg"
				],
				desc: `重庆寻梦园花果种植专业合作社位于仙女山街道荆竹村杨柳农业社，种植蓝莓、葡萄、李子、樱桃、梨子、桃子等多种水果，面积150余亩，果园管理规范、技术领先。
                产出的水果色靓、味浓、形美，品质极佳。水果采摘期从6月一直延续到10月，可提供采摘和研学合作。联系人：胡老师。联系电话：13983228377。`
			}
		]
	},
	{
		name: "寻找项目",
		list: [
			{
				id: 6,
				name: "脱毒马铃薯种植试验基地",
				imgs: [cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/tuodumalingshu/1.jpg"],
				desc: `自2009年脱毒马铃薯示范试验点落户仙女山街道荆竹村以来，经过10多年时间，培育出了青薯9号、脱毒米拉、兴佳2号、鄂薯5号、鄂薯13、黄金薯和特色紫色
                薯等品种，可供不同生态区域种植，面积也由100亩发展到5000余亩，亩产达到5200斤。试验点蜕变为试验基地，脱毒马铃薯品种供应全区乃至周边多个区县的种植需求。`
			},
			{
				id: 7,
				name: "重庆寻梦园花果种植专业合作社",
				imgs: [
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/xunmengyuan/1.jpg",
					cosPrefix + "three-level/xiangmeng/yunchuangke/chuangyehezuo/jingzhu/xunmengyuan/2.jpg"
				],
				desc: `重庆寻梦园花果种植专业合作社位于仙女山街道荆竹村杨柳农业社，种植蓝莓、葡萄、李子、樱桃、梨子、桃子等多种水果，面积150余亩，果园管理规范、技术领先。
                产出的水果色靓、味浓、形美，品质极佳。水果采摘期从6月一直延续到10月，可提供采摘和研学合作。联系人：胡老师。联系电话：13983228377。`
			}
		]
	}
]);

const list = [
	{ name: "新田野", img: cosPrefix + "three-level/xiangmeng/yunchuangke/qiyefnegcai/1.jpg" },
	{ name: "重庆方德润安生态农业旅游开发有限公司", img: cosPrefix + "three-level/xiangmeng/yunchuangke/qiyefnegcai/2.jpg" },
	{ name: "寻梦园", img: cosPrefix + "three-level/xiangmeng/yunchuangke/qiyefnegcai/3.jpg" }
];
</script>
<style lang="scss" scoped>
.yun-cun-min {
	background-color: #ffffff;
	.feng-cai-box {
		background-color: #ffffff;
		.inner-box {
			padding: 40px 320px;
			.title {
				font-size: 28px;
				font-weight: 700;
				color: #333333;
				text-align: center;
			}
			.img-list {
				display: flex;
				justify-content: space-between;
			}
			.img-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 413px;
				margin: 40px 0;
				.el-image {
					width: 100%;
					height: 243px;
					vertical-align: middle;
					border: 10px solid rgb(195 159 99 / 30%);
				}
			}
		}
	}
}
.he-zuo {
	display: flex;
	flex-direction: column;
	align-items: center;
	.title {
		padding: 20px 0;
		font-size: 28px;
		font-weight: bold;
		color: #333333;
	}
	.tabs {
		display: flex;
		padding-bottom: 20px;
		.tab {
			padding: 0 20px;
			font-size: 20px;
			cursor: pointer;
			border-right: 1px solid #dedede;
			&:hover,
			&.active {
				color: #8a1313;
			}
			&:last-child {
				border: none;
			}
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 40px 320px;
		background-color: #f7f7f7;
		.box {
			display: flex;
			flex-direction: column;
			width: 620px;

			// height: 720px;
			margin-bottom: 40px;
			background-color: #ffffff;
			&:nth-child(2n-1) {
				margin-right: 40px;
			}
			.info {
				display: flex;
				flex: 1;
				flex-direction: column;
				padding: 20px;
				color: #333333;
				.name {
					margin-bottom: 40px;
					font-size: 20px;
					font-weight: bold;
				}
				.desc {
					font-size: 16px;
				}
			}
		}
	}
}
.zhao-mu {
	width: 100%;
	padding: 40px 320px 0;
}

@media all and (max-width: 750px) {
	.yun-cun-min {
		.zhao-mu {
			padding: 0;
		}
		.he-zuo {
			.tabs {
				.tab {
					font-size: 14px;
				}
			}
			.list {
				width: 100%;
				padding: 16px;
				.box {
					width: 100%;
				}
			}
		}
		.feng-cai-box {
			padding: 16px;
			.inner-box {
				padding: 0;
				.img-list {
					flex-direction: column;
					.img-box {
						width: 100%;
						margin-top: 16px;
						margin-bottom: 0;
					}
				}
			}
		}
	}
}
</style>
